<template>
<div>
    <transition name="fade">
        <div v-show="visible" class="back-to-top" @click="backToTop" :style="customStyle">
            <i class="el-icon-arrow-up"></i>
        </div>
    </transition>
</div>
</template>

<script>
export default {
    name: 'BackToTop',
    props: {
        visibilityHeight: {
            type: Number,
            default: 100
        },
        backPosition: {
            type: Number,
            default: 0
        },
        customStyle: {
            type: Object,
            default: () => ({
                right: '20px',
                bottom: '70px',
                width: '40px',
                height: '40px',
                borderRadius: '50%',
                lineHeight: '40px',
                background: '#409EFF',
                color: '#FFFFFF',
                textAlign: 'center',
                fontSize: '22px'
            })
        },
        transitionName: {
            type: String,
            default: 'fade'
        }
    },
    data() {
        return {
            visible: false,
            interval: null,
            isMoving: false
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeUnmount() {
        window.removeEventListener('scroll', this.handleScroll)
        if (this.interval) {
            clearInterval(this.interval)
        }
    },
    methods: {
        handleScroll() {
            this.visible = window.pageYOffset > this.visibilityHeight
        },
        backToTop() {
            if (this.isMoving) return
            const start = window.pageYOffset
            const end = this.backPosition
            const duration = 150
            const startTime = Date.now()
            this.isMoving = true

            const easeInOutQuad = (t, b, c, d) => {
                t /= d / 2
                if (t < 1) return c / 2 * t * t + b
                t--
                return -c / 2 * (t * (t - 2) - 1) + b
            }

            this.interval = setInterval(() => {
                const time = Date.now() - startTime
                const val = easeInOutQuad(time, start, end - start, duration)
                window.scrollTo(0, val)
                if (time >= duration) {
                    window.scrollTo(0, end)
                    clearInterval(this.interval)
                    this.isMoving = false
                }
            }, 16)
        }
    }
}
</script>

<style scoped>
.back-to-top {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s;
}

.back-to-top:active {
    transform: scale(0.95);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .back-to-top {
        right: 20px !important;
        bottom: 80px !important;
        /* 调整位置，避免与底部导航和FAB冲突 */
        width: 40px !important;
        height: 40px !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 100px) {
    .back-to-top {
        right: 16px !important;
        bottom: 70px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
    }
}
</style>